<template>
    <view class="content">
        <image class="avatar" :src="pojo.img" mode="aspectFill"></image>
        <view class="user-details">
            <view><text class="label">车牌号:</text><text class="value">{{ pojo.chepaihao }}</text></view>
            <view><text class="label">品牌:</text><text class="value">{{ pojo.pinpai }}</text></view>
            <view><text class="label">车型:</text><text class="value">{{ pojo.chexing }}</text></view>
            <view><text class="label">尺寸:</text><text class="value">{{ pojo.chicun }}</text></view>
            <view><text class="label">载重:</text><text class="value">{{ pojo.zaizhong }}</text></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                pojo: {
                    chepaihao: '京A·00000（系统）',
                    pinpai: '东风（系统）',
                    chexing: '厢式货车（系统）',
                    chicun: '1.8*2.0（系统）',
                    zaizhong: '1吨（系统）',
                    img: 'https://p3-dcd-sign.byteimg.com/pgc-image/2ba2904589604b7690380521433f6565~noop.webp?lk3s=125a4689&x-expires=1725183017&x-signature=K5pZRle0m3oSRQ7hXWA9i4c%2BDpc%3D'
                }
            }
        },
        methods: {},
        onShow() {
            // 在实际应用中，你需要通过API获取屏幕的实际高度
            // 这里假设屏幕高度为750rpx
            const screenHeight = 750;
            this.screenHeight30Percent = screenHeight * 0.3;
        }
    }
</script>

<style scoped>
.content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.avatar {
    width: 100%; /* 图片宽度为100% */
    height: 300rpx; /* 固定高度，假设屏幕高度为750rpx，则30%为225rpx */
}

.user-details {
	width: 95%;
    padding: 20rpx 0;
    margin-left: 20rpx; /* 添加左侧外边距 */
    display: flex;
    flex-direction: column;
}

.label {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 1em; /* 添加一些内边距以增加松弛感 */
    white-space: nowrap; /* 防止文本换行 */
	margin-bottom: 1em;
}

.value {
    margin-left: 10%; /* 确保从左侧30%的位置开始显示内容 */
    clear: both; /* 清除浮动 */
	margin-bottom: 1em;
}
</style>